
const rankList = document.querySelector('.rank-lists');
// 存储最后一个被鼠标经过的元素
let lastItem;
fetch('https://www.hotread.com/api/story/typeRecommend?size=6&type=%E7%8E%B0%E4%BB%A3%E9%83%BD%E5%B8%82&targetName=%E5%A4%A7%E5%9B%BD%E5%86%9B%E5%B7%A5%EF%BC%9A%E6%88%91%E7%82%B9%E6%BB%A1%E7%A7%91%E6%8A%80%EF%BC%8C%E4%BA%AE%E5%89%9180%EF%BC%81&cb=1756122548274')
  .then(res => res.json())
  .then(res1 => {
    console.log(res1,11);
    rankList.innerHTML = '';
    res1.typeRecommend.forEach((item, index) => {
      const listItem = `
        <li class="rank-list ${index === 0 ? 'ddon-list' : ''}" onclick='jumps(${JSON.stringify(item.story)})'>
            <p class="rank-num ${index === 0 ? 'ddon-num' : ''}">0${index + 1}</p>
            <img src="${item.story.cover}" alt="" class="rank-pic ${index === 0 ? 'ddon-img' : ''}">
            <div class="rank-right">
                <p class="rank-name ${index === 0 ? 'ddon-name' : ''}">${item.story.name}</p> 
                <p class="rank-author ${index === 0 ? 'ddon-author' : ''}">${item.story.author}</p>
            </div> 
        </li>
      `;
      rankList.innerHTML += listItem;
    });
    
    rankList.innerHTML += `
      <li class="list-more" onclick="jumpBook()">
        <p class="more-txt">查看更多</p>        
      </li> 
    `;
    // 初始化为第一个元素
    lastItem = rankList.querySelector('.rank-list:first-child');
    // 绑定事件
    mouseEvent();
  })
  .catch(err => {
    console.log(err);
  });
//鼠标事件
function mouseEvent() {
  const listItems = document.querySelectorAll('.rank-list');
  
  // 清除所有元素的高亮状态
  const clearHighlights = () => {
    listItems.forEach(item => {
      item.classList.remove('ddon-list');
      item.querySelector('.rank-num').classList.remove('ddon-num');
      item.querySelector('.rank-pic').classList.remove('ddon-img');
      item.querySelector('.rank-name').classList.remove('ddon-name');
      item.querySelector('.rank-author').classList.remove('ddon-author');
    });
  };
  
  // 高亮指定元素
  const highlightItem = (item) => {
    item.classList.add('ddon-list');
    item.querySelector('.rank-num').classList.add('ddon-num');
    item.querySelector('.rank-pic').classList.add('ddon-img');
    item.querySelector('.rank-name').classList.add('ddon-name');
    item.querySelector('.rank-author').classList.add('ddon-author');
  };
  
  // 为每个列表项绑定鼠标经过事件
  listItems.forEach(item => {
    item.addEventListener('mouseenter', () => {
      // 更新最后激活项为当前元素
      lastItem = item;
      // 清除所有高亮，只高亮当前项
      clearHighlights();
      highlightItem(item);
    });
  });
  // 鼠标离开整个排行榜区域时
  rankList.addEventListener('mouseleave', () => {
    // 清除所有高亮后，只高亮最后一个激活的元素
    clearHighlights();
    if (lastItem) {
      highlightItem(lastItem);
    }
  });
}
//事件
function mouseitem() {
  const lists=document.querySelectorAll('.rank-bottom .rank-cont')
  //清楚元素高亮
  const clearLights=()=>{
    lists.forEach(item =>{
      item.classList.remove('oncl')
      item.querySelector('.rectbg').classList.remove('onrectbg')
      item.querySelector('.num2').classList.remove('onnum2')
      item.querySelector('.rankdesc').classList.remove('onrank-desc')
      item.querySelector('.title2').classList.remove('ontitle2')
      item.querySelector('.aut').classList.remove('onauthor2')
      item.querySelector('.hot').classList.remove('onfreehot')
      item.querySelector('.nonpic').classList.remove('ontxtpic')
    })
  }
  //高亮
  const highLights=(item)=>{
    item.classList.add('oncl')
    item.querySelector('.rectbg').classList.add('onrectbg')
    item.querySelector('.num2').classList.add('onnum2')
    item.querySelector('.rankdesc').classList.add('onrank-desc')
    item.querySelector('.title2').classList.add('ontitle2')
    item.querySelector('.aut').classList.add('onauthor2')
    item.querySelector('.hot').classList.add('onfreehot')
    item.querySelector('.nonpic').classList.add('ontxtpic')
  }
  lists.forEach(item =>{
    item.addEventListener('mouseenter',()=>{
      btitem=item
      clearLights()
      highLights(item)
    })
  })
  lists.forEach(item =>{
    item.addEventListener('mouseleave',()=>{
      clearLights()
      if(btitem){
        highLights(btitem)
      }
    })
  })
}
//事件
function mouseitem2() {
  const lists=document.querySelectorAll('.rank-bottom2 .rank-cont')
  //清楚元素高亮
  const clearLights=()=>{
    lists.forEach(item =>{
      item.classList.remove('oncl')
      item.querySelector('.rectbg').classList.remove('onrectbg')
      item.querySelector('.num2').classList.remove('onnum2')
      item.querySelector('.rankdesc').classList.remove('onrank-desc')
      item.querySelector('.title2').classList.remove('ontitle2')
      item.querySelector('.aut').classList.remove('onauthor2')
      item.querySelector('.hot').classList.remove('onfreehot')
      item.querySelector('.nonpic').classList.remove('ontxtpic')
    })
  }
  //高亮
  const highLights=(item)=>{
    item.classList.add('oncl')
    item.querySelector('.rectbg').classList.add('onrectbg')
    item.querySelector('.num2').classList.add('onnum2')
    item.querySelector('.rankdesc').classList.add('onrank-desc')
    item.querySelector('.title2').classList.add('ontitle2')
    item.querySelector('.aut').classList.add('onauthor2')
    item.querySelector('.hot').classList.add('onfreehot')
    item.querySelector('.nonpic').classList.add('ontxtpic')
  }
  lists.forEach(item =>{
    item.addEventListener('mouseenter',()=>{
      btitem2=item
      clearLights()
      highLights(item)
    })
  })
  lists.forEach(item =>{
    item.addEventListener('mouseleave',()=>{
      clearLights()
      if(btitem2){
        highLights(btitem2)
      }
    })
  })
}

const paid=()=>{
  const erwei=document.querySelector('.erwei')
  if(erwei.style.display='none'){
    erwei.style.display='block'
  }
  
}
const del=()=>{
  const par=event.target.parentNode.parentNode
  if(par)  return par.style.display='none'
  console.log(par)
}
// 完本榜 
const rankTimes = document.querySelectorAll('.rank-time');
const apis = [
  'https://www.hotread.com/api/common/rank/6170/2/10?cb=1756804557795',
  'https://www.hotread.com/api/common/rank/6170/3/10?cb=1757083641610',
  'https://www.hotread.com/api/common/rank/6170/0/10?cb=1757083653642',
];
function getAxious(axious) {
  const rankBt = document.querySelector('.rank-bottom');
  fetch(axious)
    .then(res => res.json())
    .then(res1 => {
      console.log(res1.list, 22);
      res1.list.forEach((item, index) => {
        const rankbtList = `
          <li class="rank-cont ${index === 0 ? 'oncl' : ''}" >
            <div class="rectbg ${index === 0 ? 'onrectbg' : ''}" onclick='jumps(${JSON.stringify(item.story)})'>
                <p class="num2 ${index === 0 ? 'onnum2' : ''}">0${index + 1}</p>
                <div class="rankdesc ${index === 0 ? 'onrank-desc' : ''}">
                    <p class="title2 ${index === 0 ? 'ontitle2' : ''}">${item.story.name}</p>
                    <p class="aut ${index === 0 ? 'onauthor2' : ''}">
                      <i>${item.story.type} |</i>${item.story.author}
                    </p>
                    <p class="hot ${index === 0 ? 'onfreehot' : ''}">${Number(item.topValue)>10000?(Number(item.topValue)/10000).toFixed(1):''}万人气</p>
                </div>
                <img src="${item.story.cover}" alt="" class="nonpic ${index === 0 ? 'ontxtpic' : ''}">
            </div>
          </li>
        `; 
        rankBt.innerHTML += rankbtList;
      });
      rankBt.innerHTML += `
        <li class="list-more">
          <p class="more-txt">查看更多</p>        
        </li> 
      `;
      btitem = rankBt.querySelector('.rank-cont:first-child'); // 修正选择器（原选择器错误）
      mouseitem();
    })
    .catch(err => {
      console.log(err);
    });
}
rankTimes.forEach((item, index) => {
  item.onclick = function() {
    rankTimes.forEach(tab => tab.classList.remove('timeon')); 
    this.classList.add('timeon'); 
    const rankBt = document.querySelector('.rank-bottom');
    rankBt.innerHTML = ''; 
    getAxious(apis[index]); 
  };
});
// 新书榜 
const rankTimes2 = document.querySelectorAll('.rank-time2');
const apis2 = [
  'https://www.hotread.com/api/common/rank/6165/1/10?cb=1756971822987', 
  'https://www.hotread.com/api/common/rank/6165/2/10?cb=1757084766879', 
  'https://www.hotread.com/api/common/rank/6165/3/10?cb=1757084789655', 
];
function getAxious2(axious) {
  const rankBt2 = document.querySelector('.rank-bottom2');
  fetch(axious)
    .then(res => res.json())
    .then(res1 => {
      console.log(res1.list, '新书榜数据');
      res1.list.forEach((item, index) => {
        const rankbtList = `
          <li class="rank-cont ${index === 0 ? 'oncl' : ''}" >
            <div class="rectbg ${index === 0 ? 'onrectbg' : ''}" onclick='jumps(${JSON.stringify(item.story)})'>
                <p class="num2 ${index === 0 ? 'onnum2' : ''}">0${index + 1}</p>
                <div class="rankdesc ${index === 0 ? 'onrank-desc' : ''}">
                    <p class="title2 ${index === 0 ? 'ontitle2' : ''}">${item.story.name}</p>
                    <p class="aut ${index === 0 ? 'onauthor2' : ''}">
                      <i>${item.story.type} |</i>${item.story.author}
                    </p>
                    <p class="hot ${index === 0 ? 'onfreehot' : ''}">${Number(item.topValue)>10000?(Number(item.topValue)/10000).toFixed(1)+'万':(Number(item.topValue))}人气</p>
                </div>
                <img src="${item.story.cover}" alt="" class="nonpic ${index === 0 ? 'ontxtpic' : ''}">
            </div>
          </li>
        `;
        rankBt2.innerHTML += rankbtList;
      });
      rankBt2.innerHTML += `
        <li class="list-more">
          <p class="more-txt">查看更多</p>        
        </li> 
      `;
      btitem2 = rankBt2.querySelector('.rank-cont:first-child');
      mouseitem2();
    })
    .catch(err => {
      console.log(err);
    });
}
rankTimes2.forEach((item, index) => {
  item.onclick = function() {
    rankTimes2.forEach(tab => tab.classList.remove('timeon'));
    this.classList.add('timeon');
    const rankBt2 = document.querySelector('.rank-bottom2');
    rankBt2.innerHTML = ''; 
    getAxious2(apis2[index]); 
  };
});
//初始化
getAxious(apis[0]); 
getAxious2(apis2[0]); 

const winHeads=document.querySelectorAll('.win-head')
winHeads.forEach((item)=>{
  item.onclick=function () {
    winHeads.forEach(wintab=>wintab.classList.remove('winon'))
    this.classList.add('winon')
    const targetSelector = this.dataset.target;
    if (!targetSelector) return; 
    const targetElement = document.querySelector(targetSelector);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth', // 平滑滚动
        block: 'start' // 对齐目标元素的顶部
      });
    }
  }
})
function jumps(hearf) {
  location.href=`./detail.html?${JSON.stringify(hearf)}`
}
    function jumpWelfare() {
        location.href='./author.html'
    }
 